import { getMapLayers, queryFeature } from '../libs/methods'
import MapPopup from '../popup'
import { addHighlight, removeHighlight } from '@/map/libs/highlight'
import GeoJSON from 'ol/format/GeoJSON'


const layerInfo = {
  'pgxb@业务数据#1': {
    '区': '区',
    '乡镇': '乡镇',
    '村': '村',
    '原小班': '原小班',
    '小班号': '小班号',
    '面积（': '面积',
    '地类': '地类',
    '前期地': '前期地',
    '地类变': '地类变',
    '林地属': '林地属',
    '海拔（m': '海拔（m）',
    '地貌': '地貌',
    '坡度': '坡度',
    '坡向': '坡向',
    '坡位': '坡位',
    '土壤名': '土壤名',
    '土壤厚': '土壤厚',
    '土壤质': '土壤质',
    '生态重': '生态重',
    '生态脆': '生态脆',
    '林种': '林种',
    '森林健': '森林健',
    '优势树': '优势树',
    '郁闭度': '郁闭度',
    '一级地': '一级地',
    '平差面': '平差面'
  },
  '地类图斑@业务数据#1': {
    'DLBM': '地类编码',
    'DLMC': '地类名称',
    'ZLDWDM': '坐落单位代码',
    'ZLDWMC': '坐落单位名称',
    'QSDWDM': 'QSDWDM',
    'QSDWMC': 'QSDWMC',
    'KCDLBM': 'KCDLBM',
    'KCXS': 'KCXS',
    'KCMJ': 'KCMJ',
    'TBDLMJ': '面积'
  }
}

export default {
  name: 'MapQuery',
  inject: ['myMap'],
  component: {
    MapPopup
  },
  data () {
    return {
      show: false,
      info: [],
      coordinate: [],
      filterFiled: ['SmID', 'SmUserID', 'SmArea', 'SmPerimeter', 'OBJECTID', 'Shape_Leng', 'Shape_Area']
    }
  },
  render () {
    if (!this.show) return null
    else {
      return (
        <a-Drawer position={this.coordinate} width="400px" mask={false} visible={this.show} onClose={this.onClose}>
          <div >
          {this.info.map(item => {
            return (
              <a-descriptions title="位置信息" column={1} bordered size="small">
               {
                  Object.keys(item.properties).map(key => {
                    if (this.filterFiled.includes(key)) {
                      return  null
                    } else {
                      return <a-descriptions-item label={key}>{item.properties[key]}</a-descriptions-item>
                    }
                  })
                }
              </a-descriptions>
            )
          })}
          </div>
        </a-Drawer>
      )
    }
  },
  methods: {
    onClose () {
      this.show = false
      removeHighlight(this.myMap.map)
    },
    init (map) {
      map.on('click', this.query)
    },
    async query (e) {
      this.info = []
      this.show = false
      const coordinate = e.coordinate
      this.coordinate = coordinate
      const layers = getMapLayers(e.map).filter(item => {
        return item.values_.name !== 'tem'
      })
      const queryLayer = layers[layers.length - 1]
      if (queryLayer?.values_.type !== 'super') {
        return true
      }
      const result = await queryFeature(queryLayer, coordinate)
      if (!result) return
      result.forEach(item => {
        const { result } = item
        result.recordsets.forEach(recordsets => {
          if (layerInfo[recordsets.datasetName]) {
            this.info = recordsets.features.features.map(item => {
              const properties = {}
              Object.keys(layerInfo[recordsets.datasetName]).forEach(filed => {
                properties[layerInfo[recordsets.datasetName][filed]] = item.properties[filed]
              })
              item.properties = properties
              return item
            })
          } else {
            this.info = recordsets.features.features
          }
        })
      })
      if (this.info.length) {
        this.show = true
        addHighlight(this.myMap.map, new GeoJSON().readFeatures(this.info[0]), {
          fill: 'rgba(0, 0, 0, 0.2)',
          stroke: {
            color: '#f00',
            width: 2
          }
        })
      }
    }
  },
  created () {
    this.myMap.mapReady(this.init.bind(this))
  }
}
